﻿/**
 *设备列表页面
 */
class EquipmentList extends UiFramework.UiAbstract
{
    onStart(divSelf: HTMLDivElement)
    {

        //头部div
        var headDiv = document.createElement("div");
        headDiv.style.position = "absolute";
        headDiv.style.width = "100%";
        headDiv.style.height = "7%";
        headDiv.style.lineHeight = "45px";
        headDiv.style.overflow = "hidden";
        this.divSelf.appendChild(headDiv);

        //头部title
        var tit = document.createElement("tit");
        tit.textContent = "设备配置列表";
        tit.style.height = "100%";
        tit.className = "configurationDetailTit";
        headDiv.appendChild(tit);

        //头部返回按钮
        var btnReturn = document.createElement("img");
        btnReturn.src = "picture/return.png";
        btnReturn.className = "configurationDetailReturn";
        headDiv.appendChild(btnReturn);


        //头部右上角全部设备按钮
        var btnHead = document.createElement("input");
        btnHead.type = "button";
        btnHead.value = "删除";
        btnHead.style.top = "15%";
        btnHead.className = "rightTopWhiteButton";
        headDiv.appendChild(btnHead);


        //中间布局div
        var middleDiv = document.createElement("div");
        middleDiv.style.position = "absolute";
        middleDiv.style.top = '7%';
        middleDiv.style.width = "100%";
        middleDiv.style.height = "86%";
        middleDiv.style.background = "#FAF0F0";
        this.divSelf.appendChild(middleDiv);

        //设备图标
        var eqIcon = document.createElement("img");
        eqIcon.src = "picture/shebeiliebiao.png";
        eqIcon.style.background = "white";
        eqIcon.style.position = "absolute";
        eqIcon.style.width = "28%";
        eqIcon.style.height = "20%";
        eqIcon.style.paddingLeft = "36%";
        eqIcon.style.paddingRight = "36%";
        eqIcon.style.paddingTop = "7%";
        eqIcon.style.paddingBottom = "10%";
        eqIcon.style.borderBottom = "1px solid #95989A";
        middleDiv.appendChild(eqIcon);

        //品牌
        var brand = document.createElement("brand");
        brand.textContent = "品牌：飞利浦";
        brand.style.top = "34%";
        //brand.className = "EquipmentListParameter";
        brand.style.position = "absolute";
        brand.style.paddingTop = "6%";
        brand.style.paddingBottom = "6%";
        brand.style.background = "white";
        brand.style.borderBottom = "1px solid #95989A";
        brand.style.borderTop = "1px solid #95989A";
        brand.style.width = "100%";
        brand.style.textAlign = "center";
        middleDiv.appendChild(brand);

        //设备ID
        var id = document.createElement("id");
        id.textContent = "设备ID：321321";
        id.style.top = "45%";
        id.style.position = "absolute";
        id.style.paddingTop = "6%";
        id.style.paddingBottom = "6%";
        id.style.background = "white";
        id.style.borderBottom = "1px solid #95989A";
        id.style.borderTop = "1px solid #95989A";
        id.style.width = "100%";
        id.style.textAlign = "center";
        middleDiv.appendChild(id);

        //设备名
        var eqName = document.createElement("name");
        eqName.style.top = "56%";
        eqName.textContent = "灯";
        eqName.style.position = "absolute";
        eqName.style.paddingTop = "6%";
        eqName.style.paddingBottom = "6%";
        eqName.style.background = "white";
        eqName.style.borderBottom = "1px solid #95989A";
        eqName.style.borderTop = "1px solid #95989A";
        eqName.style.width = "100%";
        eqName.style.textAlign = "center";
        middleDiv.appendChild(eqName);



        //设备位置
        var eqPosition = document.createElement("eqPosition");
        eqPosition.textContent = "位置：卧室";
        eqPosition.style.top = "67%";
        eqPosition.style.paddingTop = "6%";
        eqPosition.style.paddingBottom = "6%";
        eqPosition.style.background = "white";
        eqPosition.style.borderBottom = "1px solid #95989A";
        eqPosition.style.borderTop = "1px solid #95989A";
        eqPosition.style.width = "100%";
        eqPosition.style.textAlign = "center";
        eqPosition.style.position = "absolute";
        middleDiv.appendChild(eqPosition);

        //设备是否关联
        var eqISRelation = document.createElement("eqISRelation");
        eqISRelation.style.top = "78%";
        eqISRelation.textContent = "关联已有的设备：无";
        eqISRelation.style.position = "absolute";
        eqISRelation.style.paddingTop = "6%";
        eqISRelation.style.paddingBottom = "6%";
        eqISRelation.style.background = "white";
        eqISRelation.style.borderBottom = "1px solid #95989A";
        eqISRelation.style.borderTop = "1px solid #95989A";
        eqISRelation.style.width = "100%";
        eqISRelation.style.textAlign = "center";
        middleDiv.appendChild(eqISRelation);

        //更改设备名
        var changeName = document.createElement("input");
        changeName.type = "button";
        changeName.value = "更名 ▼"
        changeName.className = "changeEquipNameSpinner";
        middleDiv.appendChild(changeName);

        var xia1 = document.createElement("eqISRelation");
        xia1.style.top = "71%";
        xia1.textContent = "▼";
        xia1.style.position = "absolute";
        xia1.style.right = '2%';
        xia1.style.width = "10%";
        xia1.style.textAlign = "center";
        middleDiv.appendChild(xia1);

        var xia2 = document.createElement("eqISRelation");
        xia2.style.top = "82%";
        xia2.textContent = "▼";
        xia2.style.position = "absolute";
        xia2.style.right = '2%';
        xia2.style.width = "10%";
        xia2.style.textAlign = "center";
        middleDiv.appendChild(xia2);

        //底部完成按钮
        var ensure = document.createElement("ensure");
        ensure.textContent = "完成";
        ensure.className = "configurationDetailTit";
        ensure.style.paddingBottom = "3.5%";
        ensure.style.paddingTop = "3.5%";
        ensure.style.bottom = '0';
        this.divSelf.appendChild(ensure);

        //更换名字
        changeName.onclick = () =>
        {
            this.openDialog("lampWindow");
        }

        //更换位置
        eqPosition.onclick = () =>
        {
            this.openDialog("posiBedroomWindow");
        }

        //是否有关联的设备
        eqISRelation.onclick = () =>
        {
            this.openDialog("relateExistEquipWindow");
        }


        //删除按钮
        btnHead.onclick = () =>
        {
            this.openDialog("verifyDeleEquipDialog");
        }

        //返回按钮
        btnReturn.onclick = () =>
        {
            this.finish();
        }

        //完成设备配置
        ensure.onclick = () =>
        {
            this.openDialog("finishEquipSetDialog");
        }

    }

    onEnd()
    {

    }

}

UiMap["equipmentList"] = () =>
{
    return new EquipmentList();
}